import React, { useState } from 'react';
import { View, StyleSheet, Alert } from 'react-native';
import { Layout, UI, useThemeColors } from '@gaozh1024/rn-toolkit';

const IconTestScreen: React.FC = () => {
  const colors = useThemeColors();

  const styles = StyleSheet.create({
    section: { marginBottom: 16 },
    card: { borderRadius: 12, borderWidth: 1, borderColor: colors.border },
    row: { flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: 12 },
    borderedRow: { flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: 12, borderWidth: 1, borderColor: colors.border, padding: 8 },
  });

  const [lastPressed, setLastPressed] = useState<string>('暂无');

  return (
    <Layout.Page
      headerShown
      headerProps={{ title: 'Icon 测试', backVisible: true }}
      padding={16}
      scrollable
      testID="IconTestScreen"
    >
      {/* 基础用法：ionicons（默认） */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>基础用法</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>默认使用 ionicons；设置 name 即可渲染</UI.Text>
          <View style={styles.row}>
            <UI.Icon name="home" testID="icon-basic-home" />
            <UI.Icon name="person" testID="icon-basic-person" />
            <UI.Icon name="settings" testID="icon-basic-settings" />
            <UI.Icon name="star" testID="icon-basic-star" />
          </View>
        </Layout.Card>
      </View>

      {/* 尺寸：size */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>尺寸</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>size: number（像素）</UI.Text>
          <View style={styles.row}>
            <UI.Icon name="heart" size={16} testID="icon-size-16" />
            <UI.Icon name="heart" size={24} testID="icon-size-24" />
            <UI.Icon name="heart" size={32} testID="icon-size-32" />
            <UI.Icon name="heart" size={48} testID="icon-size-48" />
          </View>
        </Layout.Card>
      </View>

      {/* 颜色：主题键与自定义值 */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>颜色</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>
            color 支持主题键（primary/success/.../text/subtext/...）与自定义（#RRGGBB、rgba/hsl）
          </UI.Text>
          <View style={styles.row}>
            <UI.Icon name="flash" color="primary" testID="icon-color-primary" />
            <UI.Icon name="flash" color="success" testID="icon-color-success" />
            <UI.Icon name="flash" color="warning" testID="icon-color-warning" />
            <UI.Icon name="flash" color="error" testID="icon-color-error" />
            <UI.Icon name="flash" color="info" testID="icon-color-info" />
            <UI.Icon name="flash" color="text" testID="icon-color-text" />
            <UI.Icon name="flash" color="#8A2BE2" testID="icon-color-hex" />
            <UI.Icon name="flash" color="rgba(255,99,71,0.9)" testID="icon-color-rgba" />
          </View>
        </Layout.Card>
      </View>

      {/* 间距：p/m/mh/mv/ph/pv（作用于容器 Pressable） */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>间距</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>Icon 继承通用 SpacingProps：p/m/mh/mv/ph/pv</UI.Text>
          <View style={styles.borderedRow}>
            <UI.Icon name="ellipse" m={12} testID="icon-spacing-m" />
            <UI.Icon name="ellipse" mh={12} testID="icon-spacing-mh" />
            <UI.Icon name="ellipse" mv={8} testID="icon-spacing-mv" />
            <UI.Icon name="ellipse" p={4} testID="icon-spacing-p" />
            <UI.Icon name="ellipse" ph={8} testID="icon-spacing-ph" />
            <UI.Icon name="ellipse" pv={4} testID="icon-spacing-pv" />
          </View>
        </Layout.Card>
      </View>

      {/* 交互与禁用：onPress / disabled / hitSlop / accessibilityLabel */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>交互与禁用</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>
            onPress 挂载在容器；disabled 禁用；hitSlop 扩大点击区域；accessibilityLabel 自定义可达性标签
          </UI.Text>
          <View style={styles.row}>
            <UI.Icon
              name="add-circle"
              color="primary"
              size={28}
              hitSlop={{ top: 6, bottom: 6, left: 6, right: 6 }}
              accessibilityLabel="添加图标"
              onPress={() => setLastPressed('add-circle')}
              testID="icon-interactive-add"
            />
            <UI.Icon
              name="trash"
              color="error"
              size={28}
              onPress={() => setLastPressed('trash')}
              testID="icon-interactive-trash"
            />
            <UI.Icon
              name="close-circle"
              color="textDisabled"
              size={28}
              disabled
              testID="icon-disabled-close"
            />
          </View>
          <UI.Text variant="caption" color="subtext" mt={8}>最后点击：{lastPressed}</UI.Text>
        </Layout.Card>
      </View>

      {/* 样式：style（透传给图标本身） */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>样式</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>
            style 传递给图标本身；示例：不透明度与旋转
          </UI.Text>
          <View style={styles.row}>
            <UI.Icon name="refresh" color="info" size={28} style={{ opacity: 0.5 }} testID="icon-style-opacity" />
            <UI.Icon name="arrow-forward-circle" color="success" size={32} style={{ transform: [{ rotate: '45deg' }] }} testID="icon-style-rotate" />
          </View>
        </Layout.Card>
      </View>
    </Layout.Page>
  );
};

export default IconTestScreen;